<template>
	<!-- 周末去哪儿 -->
	<view class="weekendgo">
		<view class="header uni-flex uni-row">
			<view style="width: 20upx;"></view>
			周末去哪儿
		</view>
		<view class="content">
			<view class="content-item" v-for="weekendgo in weekendgoList" :key="weekendgo.id" @tap="toScenicSpot(weekendgo)">
				<image lazy-load="true" mode="widthFix" :src="weekendgo.img"></image>
				<view class="category">{{ weekendgo.category }}</view>
				<view class="comment">{{ weekendgo.comment }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			weekendgoList:{
				type:Array,
				require:true
			}
		},
		data() {
			return {
					
			};
		},
		methods:{
			toScenicSpot() {
				console.log("go ScenicSpot")
			}
		}
	}
</script>
	
<style lang="scss" scoped>
	.weekendgo{
		width: 100%;
		.header{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
		}
		.content{
			background-color: #fcfcfc;
			.content-item{
				image{
					width: 100%;
					max-height: 36.64vw;
					will-change: transform;
				}
				.category{
					font-size: 28upx;
					padding-left: 20upx;
					color: #212121;
				}
				.comment{
					width: 80%;
					line-height: 44upx;
					padding-left: 20upx;
					font-size: 24upx;
					color:#616161;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: inline-block;
				}
			}
		}
	}
</style>
